<template>
  <div class="help">
    <div class="help_main">
      <div
        class="top"
        :style="{
          background: searchshow === false ? 'rgba(0,0,0,0.05)' : 'white',
          color: searchshow === false ? 'white' : 'gray'
        }"
      >
        <div class="top_main">
          <div class="top_left">
            <div>
              <router-link to="/" tag="span">
                <i class="iconfont icon_jd_shouye iconhome"></i>
              </router-link>
            </div>
            <div style="margin-left:12px">
              <span style="cursor: pointer;">
                <router-link to="/" tag="span">首页</router-link>
              </span>
            </div>
            <div v-if="logined" style="margin-left:12px">
              欢迎您：{{ name }}
              <span
                style="margin-left:10px;cursor: pointer;"
                @click="goadmin"
              >个人中心</span
              >
              <span
                style="cursor: pointer;margin-left:12px"
                @click="dologinout"
              >
                <span>退出</span>
              </span>
            </div>
            <div v-else style="margin-left:12px">
              <router-link
                tag="span"
                :to="{
                  path: '/login',
                  query: { active: 'login', redirect: this.$route.fullPath }
                }"
              >登录</router-link
              >
              <router-link
                style="margin-left:12px;cursor: pointer;"
                tag="span"
                :to="{
                  path: '/login',
                  query: { active: 'register', redirect: this.$route.fullPath }
                }"
              >注册</router-link
              >
            </div>
          </div>
          <div v-show="searchshow" class="top_center">
            <el-input
              placeholder="支持商品名称和店铺名称搜索"
              v-model.trim="searchipt"
              @change="dosearch"
            >
              <i slot="suffix" class="el-input__icon el-icon-search"></i>
            </el-input>
          </div>
          <div class="top_right">
            <el-menu
              default-active="/help"
              router
              :text-color="searchshow ? '#000' : '#dbdbdb'"
              :active-text-color="searchshow ? '#000' : '#fff'"
              class="el-menu-demo"
              mode="horizontal"
            >
              <el-menu-item
                index="/admin/auditgoods/mycollect"
              >我的收藏</el-menu-item
              >
              <el-menu-item index="/cooperation">商家合作</el-menu-item>
              <el-menu-item index="/settled">招商入驻</el-menu-item>
              <el-menu-item index="/help">帮助中心</el-menu-item>
            </el-menu>
          </div>
        </div>
      </div>
      <div class="header">
        <div class="header_box">
          <h1>帮助中心</h1>
          <p>[以技术为驱动，帮助大家轻松推广赚钱]</p>
          <div class="help_ipt">
            <!-- <el-input
              v-model="helpipt"
              placeholder="输入问题关键词，找到答案"
              style="width:650px;height:48px"
              @change="helpchange"
            >
              <i slot="suffix" class="el-input__icon el-icon-search"></i>
            </el-input>
            <div class="search_hot">
              <a
                href="#"
                target="_blank"
                rel="noopener noreferrer"
              >信用积分规则</a
              >
              <a href="#" target="_blank" rel="noopener noreferrer">发单规则</a>
              <a
                href="#"
                target="_blank"
                rel="noopener noreferrer"
              >超级搜索API</a
              >
            </div> -->
          </div>
        </div>
        <div class="header_tab">
          <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane
              v-for="(item, index) in tabList"
              :key="index"
              :name="'' + item.id"
            >
              <span slot="label">{{ item.class_name }}</span>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <div class="help_content" v-loading="loading">
        <div class="content_left">
          <el-menu
            :default-active="activemenu"
            class="el-menu-vertical-demo"
            @select="handleOpen"
          >
            <el-menu-item
              v-for="(item, i) in helpList"
              :index="item.title"
              :key="i"
            >
              <span
                slot="title"
              >{{ item.title }} <i class="el-icon-arrow-right"></i
              ></span>
            </el-menu-item>
          </el-menu>
        </div>
        <div class="content_right">
          <el-card :body-style="{ padding: '10px' }">
            <div class="card_main">
              <div class="card_top">
                {{ activemenu }}
              </div>
              <hr />
              <div class="c_main">
                <div class="main_title">
                  {{ activemenu }}
                </div>
              </div>
              <div v-html="info">
                <!-- {{ info }} -->
              </div>
            </div>
          </el-card>
        </div>
      </div>
      <div class="sidebar" v-if="$route.name!=='allgoods'&&$route.name!=='realtimelist'" >
        <!-- <div class="pagebox">{{ currentPage }}/{{ max_page }}</div> -->
        <div class="btns">
          <!-- <p @click="gonext(1)">
          向上一页
        </p>
        <p @click="gonext(2)">
          向下一页
        </p> -->
          <p>
            <router-link to="/help">
              帮助中心
            </router-link>
          </p>
          <p>
            建议反馈
          </p>
          <p>
            <a href="tencent://message/?Site=dounm.com&uin=756589657&Menu=yes" target="_blank" rel="noopener noreferrer">联系客服</a> 
          </p>
        <!-- <p>
          一键复制
        </p> -->
        </div>
        <backtop
          transitionName="fade"
          :customStyle="backtopStyle" 
          :visibilityHeight="0" 
          :backPosition="0"
        ></backtop>
      </div>
    </div>
    <footerbox></footerbox>
  </div>
</template>

<script>
import logo from '@/components/logo.vue'
import footerbox from '@/components/footerbox.vue'
import backtop from '@/components/backtop'

import { getWebInfo } from '@/api/login'
import {
  getArticleContent,
  getApiClass,
  getAdminClassList
} from '@/api/article'
export default {
  name: 'Help',
  components: {
    logo,
    footerbox,
    backtop
  },
  data() {
    return {
        backtopStyle: {
        'right': '100px',
        'bottom': '150px',
        'width': '40px',
        'height': '40px',
        'border-radius': '20px',
        'line-height': '40px', 
        'background': '#fff'
      },
      loading:false,
      tabList: [],
      info: '',
      activemenu: '',
      helpList: [
        // {
        //   id: 5,
        //   title: '测试公告',
        //   update_at: '2020-07-29 14:25:06'
        // }
        // {
        //   id: 1,
        //   title: '京粉客',
        //   content: [
        //     {
        //       id: 2,
        //       title: '测试子类'
        //     },
        //     {
        //       id: 3,
        //       title: '测试子类22'
        //     }
        //   ]
        // }
      ],
      activeName: '',
      helpipt: '',
      number: '',
      tweenedNumber: '',
      searchshow: false,
      mainifoshow: false,
      name: '', //用户名
      logined: this.$ls.get('token') ? true : false,
      searchipt: '', //搜索
      token: this.$ls.get('token')
    }
  },
  watch: {
    number: function(newValue) {
      console.log(newValue)
      // gsap.to(this.$data, { duration: 0.5, tweenedNumber: newValue });
    },
    searchipt: {
      handler() {
        // console.log("内容", this.searchipt);
        this.$ls.set('search', this.searchipt)
      }
    }
  },
  computed: {
    animatedNumber: function() {
      return this.tweenedNumber.toFixed(0)
    }
  },
  created() {
    if (this.$ls.get('userinfo')) {
      this.logined = true
      this.name = this.$ls.get('userinfo').nickname
    }
    this.getApiClass()
  },
  mounted() {
    this.$router.afterEach(() => {
      // to, from, next
      window.scrollTo(0, 0)
    })
    window.addEventListener('scroll', this.showIpt)
  },
  methods: {
    //获取文章标题
    getAdminClassList(id) {
      getAdminClassList({
        class_id: id
      })
        .then(res => {
          if (res.code == 200) {
            // console.log('文章标题返回',res)
            this.helpList = res.data
            if (this.$route.query.id) {
              for (const i in this.helpList) {
                if (this.helpList[i].id == this.$route.query.id) {
                  this.activemenu = this.helpList[i].title
                }
              }
              this.getArticleContent(this.$route.query.id)
            } else {
              this.activemenu = res.data[0].title
              this.getArticleContent(res.data[0].id)
            }
          } else {
            this.$message.info(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },

    //前台获取分类上下级嵌套
    getApiClass() {
      getApiClass()
        .then(res => {
          if (res.code == 200) {
            // console.log('获取分类上下级嵌套',res)
            this.tabList = res.data
            if (this.$route.query.newsra) {
              this.activeName = '' + this.$route.query.newsra
              this.getAdminClassList(this.$route.query.newsra)
            } else {
              this.activeName = '' + res.data[0].id
              this.getAdminClassList(res.data[0].id)
            }
          } else {
            this.$message.info(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },

    //获取文章内容
    getArticleContent(id) {
      this.loading=true
      getArticleContent({
        article_id: id
      })
        .then(res => {
          if (res.code == 200) {
            // console.log('文章内容返回', res)
            this.info = res.data.content
            this.loading=false
          } else {
            this.$message.info(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },

    handleOpen(key, keyPath) {
      // console.log('open', key, keyPath)
      this.activemenu = key
      var id = ''
      for (const i in this.helpList) {
        if (this.helpList[i].title == this.activemenu) {
          id = this.helpList[i].id
        }
      }
      this.getArticleContent(id)
    },
    handleClick(tab, event) {
      // console.log(tab, event)
      // console.log(this.activeName)
      this.getAdminClassList(this.activeName)
    },
    helpchange(val) {
      console.log(val)
    },
    goadmin() {
      const routes = this.$router.resolve({
        path: '/admin'
      })
      window.open(routes.href, '_blank')
    },
    dologinout() {
      this.$ls.clear()
      if (this.$route.name === 'homepage') {
        this.$refs.allgoods.logined = false
      }
      this.$message.success('退出成功')
      this.logined = false
    },
    clearsearch() {
      this.searchipt = ''
      this.$ls.remove('search')
    },
    showIpt() {
      if (
        !!document.documentElement.scrollTop &&
        document.documentElement.scrollTop > 110
      ) {
        // 页面高度大于200执行操作;
        this.searchshow = true
      } else {
        this.searchshow = false
        // 页面高度小于200执行操作;
      }
    },
    dosearch() {
      // console.log(this.searchipt)
      // console.log(this.$route);
      if (this.searchipt == '') {
        this.$ls.remove('search')
      }

      this.$router.push({
        path: '/jdselectgoods/allgoods',
        query: {
          search: this.searchipt
        }
      })
    },
    hotSearch(kw) {
      this.searchipt = kw
      this.dosearch()
    }
  }
}
</script>

<style lang="less" scoped>
.help {
  width: 100%;
  .help_main {
    // width: 1280px;
    margin: 0 auto;
    .top {
      width: 100%;
      height: 40px;
      position: fixed;
      top: 0;
      font-size: 14px;
      line-height: 40px;
      // color: white;
      z-index: 99;
      animation: all 5s linear;
      // a{
      //   color: white;
      // }
      .top_main {
        // background-color: #e6e6e6;
        font-size: 12px;
        width: 1280px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        // color: white;
        .top_left {
          // width: 220px;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        .top_center::v-deep {
          .el-input__inner {
            height: 30px;
            width: 350px !important;
            // padding-left: 120px !important;
          }
          .el-radio-button__inner {
            padding: 8px 15px;
          }
          .el-radio-group {
            margin-left: -4px;
          }

          .el-input__icon {
            line-height: 30px;
          }
        }
        .top_right {
          width: 400px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          /deep/.el-menu-item {
            height: 37px;
            line-height: 37px;
            border: none;
          }
          /deep/.el-menu {
            background-color: transparent;
          }
          /deep/.el-menu.el-menu--horizontal {
            border-bottom: none;
          }
          /deep/ .el-menu-item:hover {
            outline: 0;
            background-color: transparent;
          }
          /deep/.is-active {
            background-color: transparent;
          }
        }
      }
    }
    .header {
      width: 100%;
      height: 361px;
      // background: url('~@/assets/imgs/header_bg.png') no-repeat center;
      background: url('//img.letuilm.com/2020/07/5cfa6a2020072915042349851.png')
        no-repeat center;
      background-size: 100% 100%;
      .header_box {
        padding: 10px;
        h1 {
          color: #fff;
          font-size: 42px;
          font-weight: 800;
          text-align: center;
          letter-spacing: 5px;
          padding: 10px 0 0 0;
          margin-bottom: 20px;
        }
        p {
          margin-bottom: 35px;
          letter-spacing: 2px;
          color: #fff;
          font-size: 14px;
          font-weight: 200;
          text-align: center;
        }
        .help_ipt {
          width: 650px;
          height: 79px;
          margin: 0 auto;
          /deep/.el-input__inner {
            font-size: 22px;
            border-radius: 25px;
            border: 1px solid #fff;
            background-color: transparent;
            width: 650px;
            padding: 16px 85px 16px 25px;
            height: 48px;
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 24px;
            color: #fff;
          }
          /deep/.el-input__suffix {
            top: 3px;
            right: 12px;
            font-size: 22px;
          }
          .search_hot {
            display: flex;
            padding-top: 15px;
            a {
              font-size: 12px;
              color: rgba(255, 255, 255, 0.5);
              padding: 0 10px;
            }
            a:hover {
              color: white;
            }
          }
        }
      }
      .header_tab {
        width: 1200px;
        margin: 0 auto;
        padding-top: 33px;
        /deep/.el-tabs__header {
          border-top-left-radius: 8px;
          border-top-right-radius: 8px;
          border: none;
        }
        /deep/.el-tabs__nav {
          border-top-left-radius: 8px;
          border-top-right-radius: 8px;
          border: none;
        }
        /deep/.el-tabs__item {
          width: 299px;
          height: 58px;
          color: white;
          line-height: 58px;
          font-size: 14px;
          border-top-left-radius: 8px;
          border-top-right-radius: 8px;
          background-color: rgba(255, 255, 255, 0.3);
          .elicon {
            font-size: 18px;
          }
        }
        /deep/.is-active {
          color: blue;
          background-color: #fff;
        }
        /deep/.el-tabs__item:hover {
          color: blue;
          background-color: #fff;
        }
      }
    }
    .help_content {
      width: 1200px;
      margin: 0 auto;
      margin-top: 15px;
      display: flex;
      justify-content: space-between;
      align-content: flex-start;
      .content_left {
        width: 280px;
        min-height: 840px;
        box-sizing: border-box;
        margin-right: 20px;
        padding: 15px 54px 40px;
        background-color: #fff;
        /deep/.el-menu {
          border: none;
        }
        /deep/.el-submenu__title {
          border-bottom: 1px solid #e6e6e6;
          .el-submenu__icon-arrow {
            transform: rotate(-90deg);
            font-size: 14px;
          }
        }
        /deep/.is-opened {
          color: #4e7aff;
          .el-submenu__title .el-submenu__icon-arrow {
            transform: rotate(0deg);
          }
        }
        /deep/.el-menu-item {
          min-width: 160px;
        }
      }
      .content_right {
        flex: 1;
        text-align: left;
        hr {
          height: 1px;
          border: none;
          background-color: #f2f2f2;
        }
        .card_main {
          .card_top {
            box-sizing: border-box;
            padding: 10px 0;
            font-size: 20px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #4d4d4d;
          }
          .c_main {
            // width:auto;
            display: flex;
            justify-content: center;
            box-sizing: border-box;
            padding: 15px;
            background: url('~@/assets/imgs/content_bg.png');
            .main_title {
              display: inline;
              font-size: 28px;
              background-image: -webkit-linear-gradient(
                left,
                rgb(56, 89, 254),
                rgb(118, 140, 249)
              );
              color: rgb(255, 255, 255);
              letter-spacing: 2px;
              padding: 6px 1em;
              box-sizing: border-box;
            }
          }
        }
      }
    }
     .sidebar {
      position: fixed;
      top: 50%;
      right: 20px;
      // border: 1px solid #E7E7E7;
      margin: 10px 0;
      width: 50px;
      border-radius: 3px;
      box-shadow: 0 0 6px #eee;
      .pagebox{
        width: 100%;
        color: #4d75ff;
        font-size: 14px;
        padding-bottom: 6px;
        text-align: center;
        background-color: #F6F6F6;
      }
      .btns{
        display:flex;
        flex-wrap:wrap;
        background-color: #fff;
      }
      /deep/.el-icon-download{
        transform: rotate(180deg);
        border: 1px solid #E7E7E7;
        display: block;
        width: 50px;
        height: 43px;
        line-height: 40px;
        background: #fff;
        border-radius: 3px;
        font-size: 26px;
        font-weight: bold;
        color: #4d75ff;
        cursor: pointer;
        margin-top: 10  px;
        // box-shadow: 0 0 12px #eee;
      }
      p {
        display: block;
        width: 100%;
        font-size: 12px;
        color: #666;
        border-top: 1px solid #E7E7E7;
        padding: 6px 6px;
        letter-spacing: 2px;
        text-align: center;
        cursor: pointer;
      }
      p:hover{
        color: #4d75ff;
      }
   }
  }
}
</style>
